<script setup lang="ts">
import {getRouterById, getRouterTree} from "@/api/router-api";
import {computed, ref, onMounted, type PropType} from "vue";
import type {RouterType} from "@/type/router-type.ts";
import {replaceDoubleSlash} from "@/utils/string-utils.ts";

const props = defineProps({
  modelValue: {
    type: Object as PropType<RouterType>,
    default() {
      return {
        parentId: ''
      }
    }
  },
  enableEdit: {
    type: Boolean,
    default: false,
  },
  // 是否折叠起来
  collapse: {
    type: Boolean,
    default: false
  }
})
const disabled = computed(()=>{
  return !props.enableEdit
})
const emit = defineEmits(['update:modelValue'])
const routerFormObj = computed({
  get() {
    return props.modelValue
  },
  set(val) {
    emit('update:modelValue', val)
  }
})

/**
 * 路由绝对路径构建器
 */
const builderFullPathHandler = async () => {
  routerFormObj.value.routerFullPath = ''
  if (routerFormObj.value.parentId) {
    try{
      // 获取父级路由的路由绝对路径
      const res = await getRouterById(routerFormObj.value.parentId)
      routerFormObj.value.routerFullPath = res.data.routerFullPath
    } catch (e) {
      console.error('获取父级路由出错', e)
    }
  }
  if(!routerFormObj.value.routerFullPath){
    routerFormObj.value.routerFullPath = '/'
  }
  routerFormObj.value.routerFullPath = routerFormObj.value.routerFullPath + "/" + routerFormObj.value.routerPath
  // 将多个连续的"/"替换为单个"/"
  routerFormObj.value.routerFullPath = replaceDoubleSlash(routerFormObj.value.routerFullPath)
  routerFormObj.value.routerPath = replaceDoubleSlash(routerFormObj.value.routerPath)
}

const data = ref<RouterType[]>([])
onMounted(() => {
  getRouterTree({}).then(res => {
    data.value = res.data
  })
})
</script>

<template>
  <el-form
      :model="routerFormObj"
      :label-width="'auto'"
  >
    <el-row :gutter="12">
      <el-col>
        <el-form-item label="父级路由" props="parentId">
          <el-cascader
              :disabled="disabled"
              style="width: 100%"
              :options="data"
              v-model="routerFormObj.parentId"
              :props="{
            label: 'routerName',
            value: 'routerId',
            checkStrictly: true,
            emitPath: false
          }"
              @change="builderFullPathHandler"
              clearable
          />
        </el-form-item>
      </el-col>
      <el-col>
        <el-form-item v-if="routerFormObj.routerFullPath" label="路由绝对路径">
          <el-button link type="primary">{{routerFormObj.routerFullPath}}</el-button>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="路由名称">
          <el-input v-model="routerFormObj.routerName" placeholder="请输入路由名称" :disabled="disabled"/>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="路由相对路径">
          <el-input v-model="routerFormObj.routerPath"
                    @change="builderFullPathHandler"
                    placeholder="请输入路由相对路径"
                    :disabled="disabled"
          />
        </el-form-item>
      </el-col>
      <el-col :span="collapse?12:24">
        <el-form-item label="是否为请求">
          <el-select v-model="routerFormObj.isRequest" placeholder="请选择是否为请求" :disabled="disabled">
            <el-option label="是" :value="true"/>
            <el-option label="否" :value="false"/>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="collapse?12:24">
        <el-form-item
            label="请求方式"
            v-if="routerFormObj.isRequest"
        >
          <el-select v-model="routerFormObj.requestMethod" placeholder="请选择请求方式" :disabled="disabled">
            <el-option label="GET" value="GET"/>
            <el-option label="POST" value="POST"/>
            <el-option label="PUT" value="PUT"/>
            <el-option label="DELETE" value="DELETE"/>
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>

<style scoped>

</style>
